<!DOCTYPE html>
<html>
<head>
    <title>在线聊天系统</title>
    <meta charset="utf-8">
</head>
<body>
    <div class="container">
        <div class="header">
            <div id="user_info">
                <span id="nickname"></span>
                <a id="quit" onclick="quit()" href="#">退出</a> 
            </div>
            <span id="hello_text"></span>
            <div id="connection_status">
                <span id="connecting" class="status" style="color: #777;">● 正在连接</span>
                <span id="connected" class="status" style="display: none; color: #03af20;">● 已连接</span>
                <span id="stop" class="status" style="display: none; color: red;">● 连接断开</span>
                <span id="error" class="status" style="display: none; color: red;">● 连接意外中断</span>
            </div>
        </div>
        <div class="body">
            <div class="friend-list"></div>
            <div class="chat">
                <div class="chat-main"></div>
                <div class="chat-send">
                    <textarea class="chat-input" onkeydown="inputKeyDown(event)"></textarea>
                    <div class="chat-send-bottom">
                        <span class="chat-send-tip">Enter发送, Ctrl + Enter换行</span>
                        <button class="chat-send-btn" onclick="sendMessageBtn()">发送</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script type="text/javascript" src="./js/jquery-3.5.1.min.js"></script>
    <script type="text/javascript">
        var ws;  // WebSocket连接对象
        var ws_url = 'ws://coderxiaomo.top:8001/';
        var currentChat = '';  // 当前和谁在聊天

        // 设置状态
        var setStatus = function(status) {
            $('#connection_status .status').hide();
            $('#connection_status #' + status).show();
        }

        // 绑定点击好友的事件
        $('.friend-list').on('click', '.friend', function(){
            if (!$(this).hasClass('active')) {
                // 标记点击了谁
                $('.friend').removeClass('active');
                $(this).addClass('active');
                // 创建或切换到对应的聊天卡片上
                var nickname = $(this).text();
                var chatCard = $(`.chat-main .chat-card[data-target="${nickname}"]`);
                if (chatCard.length == 0) {
                    // 不存在该聊天卡片，则创建
                    chatCard = $(`<div class="chat-card" data-target="${nickname}"></div>`);
                    $('.chat-main').append(chatCard);
                }
                // 隐藏之前的卡片
                $('.chat-main .chat-card').removeClass('active');
                // 显示当前的卡片
                chatCard.addClass('active');
                // 显示和谁聊天
                $('#hello_text').text(`正在和“${nickname}”聊天`);
                currentChat = nickname;
            }
        });


        window.onload = function () {
            var nickname = localStorage.getItem('nickname');
            
            if (nickname) {
                // 昵称存在，则显示昵称
                var element = document.getElementById('hello_text');
                element.innerText = nickname + '，欢迎使用在线聊天系统';

                // 用户登录
                $.ajax({
                    url: 'http://coderxiaomo.top/login/',
                    type: 'POST',
                    conetentType: 'application/json',
                    data: JSON.stringify({
                        nickname: nickname
                    }),
                    dataType: 'json',
                    cache: false,
                    success: function(res) {
                        if (res.code == "200") {
                            var user_id = res.data.user_id;
                            console.log('登陆成功' + 'userid='+ user_id)
                            ws = connect(ws_url + '?user_id=' + user_id);
                        }
                        else {
                            alert('系统通知：' + res.err);
                        }
                    },
                    fail: function(err) {
                        console.error(err);
                        alert('发送错误：' + err);
                    }
                })
            }
            else {
                // 昵称不存在，跳转到登录页面
                window.location.href = './index.html';
            }
        }

        // 建立了websocket连接
        function connect(ws_url) {
            // 建立WebSocket连接
            var ws = new WebSocket(ws_url);
            // 定义事件
            ws.onopen = function(e) {
                console.log('WebSocket建立连接成功');
                var nickname = localStorage.getItem('nickname');
                $('#nickname').text(`你好, ${nickname} `)
                setStatus('connected');
            }
            ws.onmessage = function(e) {
                console.log('WebSocket收到消息:', e.data);
                var message = JSON.parse(e.data);
                // 消息类型：
                if (message.sender == 'system') {
                    if (message.contentType == 'text') {
                        console.log(message.content);
                    }
                    else if (message.contentType == 'friendsList') {
                        // 加载好友列表
                        loadFriendsList(message.content);
                    }
                    else if (message.contentType == 'addFriend') {
                        // 新增好友
                        addFriend(message.content);
                    }
                    else if (message.contentType == 'removeFriend') {
                        // 移除好友
                        removeFriend(message.content);
                    }
                }
                else {
                    addMessage(message.sender, message.sender, message.content);
                }
            }
            ws.onclose = function(e) {
                console.log('WebSocket连接中断');
                setStatus('stop');
            }
            ws.onerror = function(e) {
                console.log('WebSocket错误', e);
                setStatus('error');
            }
            return ws;
        }

        // "发送"按钮点击事件
        function sendMessageBtn() {
            // 获取文本内容
            var input = document.getElementsByClassName('chat-input')[0];
            var text = input.value;

            // 发送文本消息 // TODO 发送消息的数据结构
            var message = {
                sendTo: currentChat,
                contentType: 'text',
                content: text
            };

            var result = sendMessage(message);
            if (result) {
                var nickname = localStorage.getItem('nickname');
                addMessage(currentChat, nickname, text);
                input.value = '';
            }
        }

        // 输入框的键盘按下事件
        function inputKeyDown(event) {
            //console.log(event);
            // 判定是否按下回车键
            if (event.keyCode == 13) {
                var input = event.target;
                var text = input.value;

                if (event.ctrlKey) {
                    // Ctrl + Enter 换行
                    input.value = text + '\n';
                }
                else {
                    // 阻止默认行为
                    event.preventDefault();
                    // Enter 发送消息
                    var message = {
                        sendTo: currentChat,
                        contentType: 'text',
                        content: text
                    };
                    var result = sendMessage(message);
                    if (result) {
                        var nickname = localStorage.getItem('nickname');
                        // 把消息加入到聊天界面
                        addMessage(currentChat, nickname, text);
                        input.value = '';
                    }
                }
            }
        }

        // 发送消息的函数
        function sendMessage(message) {
            // 检查WebSocket
            if (!ws) {return false;}
            if (ws.readyState != ws.OPEN) {return false;}
            // 检查消息
            message.content = message.content.trim();
            if (message.content == '') {return false;}
            if (currentChat == '') {return false;}
            // 发送消息
            ws.send(JSON.stringify(message));
            return true;
        }



///////////////////////////////工具类函数//////////////////////////////
        // 把消息加入到聊天界面
        function addMessage(target, sender, text) {
            var chatCard = $(`.chat-main .chat-card[data-target="${target}"]`);
            var message = $('<p>').text(`${sender}: ${text}`);
            chatCard.append(message);
        }

        // 加载好友列表
        function loadFriendsList(friendsList) {
            var friendsListContainer = $('.friend-list');
            friendsListContainer.empty();

            for (var i = 0; i < friendsList.length; i ++) {
                var friend = friendsList[i];
                var friendObj = $(`<div class="friend">${friend}</div>`);
                friendsListContainer.append(friendObj);
                // 创建聊天卡片
                var chatCard = $(`<div class="chat-card" data-target="${friend}"></div>`);
                $('.chat-main').append(chatCard);
            }
        }

        // 添加好友
        function addFriend(nickname) {
            var friendsListContainer = $('.friend-list');
            var friendObj = $(`<div class="friend">${nickname}</div>`);
            friendsListContainer.append(friendObj);
            // 创建聊天卡片
            var chatCard = $(`<div class="chat-card" data-target="${nickname}"></div>`);
            $('.chat-main').append(chatCard);
        }

        // 移除好友
        function removeFriend(nickname) {
            $(`.friend:contains(${nickname})`).remove();
            $(`.chat-card[data-target=${nickname}]`).remove();
        }

        // 注销函数
        function quit () {
            // 关闭WebSocket
            if (ws) {
                if (ws.readyState == ws.OPEN) {
                    ws.close();
                }
            }
            // 跳转页面
            localStorage.removeItem('nickname');
            window.location.href = './index.html';
        }
    </script>

    <style type="text/css">
        * { margin: 0; padding: 0; }
        body {
            background: #d2d2d2;
        }
        .container {
            /*自身的样式*/
            width: 70%;
            min-width: 500px;
            margin: 5vh auto 0;
            box-shadow: #b9b9b9 0 0 6px 4px;
            background-color: white;
            border-radius: 6px;
            overflow: hidden;
            /*内部元素的布局*/
            display: flex;
            flex-direction: column;
        }
        .header {
            padding: 6px 0;
            text-align: center;
            position: relative;
        }
        .header #user_info {
            position: absolute;
            left: 0.5em;
        }
        .header #connection_status {
            position: absolute;
            top: 0.4em;
            right: 0.7em;
        }
        .body {
            /*自身样式*/
            height: 86vh;
            border-top: 1px solid #aaa;
            /*内部元素的布局方式*/
            display: flex;
        }
        .body .friend-list {
            border-right: 1px solid #aaa;
            background: #f4f4f4;
            width: 20%;
            min-width: 200px;
        }
        .body .friend-list .friend {
            border-bottom: 1px solid #ccc;
            padding: 1em;
            background: #f4f4f4;
            cursor: pointer;
        }
        .body .friend-list .friend:hover {
            background: #eee;
        }
        .body .friend-list .friend.active {
            background: #ccc;
        }

        .body .chat {
            background: #eee;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }
        .body .chat .chat-main {
            flex-grow: 1;
        }
        .body .chat-main .chat-card {
            background: #fafafa;
            width: 100%;
            height: 100%;
            display: none;
        }
        .body .chat-main .chat-card.active {
            display: block;
        }
        .body .chat .chat-send {
            height: 200px; 
            border-top: 2px solid #ccc; 
            display: flex; 
            flex-direction: column;
        }
        .body .chat-send .chat-input {
            resize: none;
            flex-grow: 1;
            border: none;
            padding: 0.5em;
            font-size: large;
        }
        .body .chat-send .chat-input:focus {
            outline: none;
        }
        .body .chat-send .chat-send-bottom {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.5em;
            font-size: small;
            color: #bdbdbd;
            background: #fff;
        }
        .body .chat-send-bottom .chat-send-btn {
            padding: 0.2em 1em;
        }
    </style>
</body>
</html>